<template>
  <div class="dashboard-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎来到外卖平台</h1>
      <p class="welcome-subtitle">发现美食，享受生活</p>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-wrapper">
        <el-input
          v-model="searchQuery"
          placeholder="搜索您喜欢的菜品..."
          class="search-input"
          clearable
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 菜品浏览区域 -->
    <div class="dishes-section">
      <div class="section-header">
        <h2 class="section-title">菜品浏览</h2>
        <p class="section-subtitle">发现各种美味菜品</p>
        <el-button type="primary" size="large" @click="goToDishList">
          <i class="el-icon-dish"></i> 浏览所有菜品
        </el-button>
      </div>
      
      <!-- 推荐菜品展示 -->
      <div class="featured-dishes">
        <h3 class="featured-title">推荐菜品</h3>
        <el-row :gutter="20" v-loading="loading">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="dish in featuredDishes" :key="dish.dishid">
            <el-card class="dish-card" shadow="hover">
              <div class="dish-image">
                <img :src="dish.dishcover || require('@/assets/dishes/dish1.jpg')" :alt="dish.dishname">
              </div>
              <div class="dish-info">
                <h3 class="dish-name">{{ dish.dishname }}</h3>
                <p class="dish-price">¥{{ dish.dishprice }}</p>
                <p class="dish-description">{{ dish.dishdescription || '美味可口，值得品尝' }}</p>
                <div class="dish-actions">
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="addToCart(dish)"
                    :disabled="!isLoggedIn"
                  >
                    <i class="el-icon-plus"></i> 加入购物车
                  </el-button>
                  <el-button 
                    size="small" 
                    @click="viewDishDetail(dish)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 功能导航区域 -->
    <div class="features-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="feature in features" :key="feature.id">
          <el-card class="feature-card" shadow="hover" @click.native="navigateTo(feature.path)">
            <div class="feature-icon">
              <i :class="feature.icon"></i>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户信息区域 -->
    <div class="user-section" v-if="isLoggedIn">
      <el-card class="user-card">
        <div class="user-info">
          <el-avatar :size="60" :src="userInfo.avatar || defaultAvatar"></el-avatar>
          <div class="user-details">
            <h3>{{ userInfo.username || '用户' }}</h3>
            <p>{{ userInfo.sign === 1 ? '店长' : '普通用户' }}</p>
          </div>
        </div>
        <div class="user-actions">
          <el-button type="primary" @click="$router.push('/cart')">
            <i class="el-icon-shopping-cart-2"></i> 购物车
          </el-button>
          <el-button @click="$router.push('/information')">
            <i class="el-icon-user"></i> 个人中心
          </el-button>
          <el-button 
            v-if="isStoreOwner" 
            type="success" 
            @click="$router.push('/store-management')"
          >
            <i class="el-icon-setting"></i> 商店管理
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 平台介绍 -->
    <div class="intro-section">
      <h2 class="intro-title">平台特色</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="intro in intros" :key="intro.id">
          <div class="intro-item">
            <div class="intro-icon">
              <i :class="intro.icon"></i>
            </div>
            <h4>{{ intro.title }}</h4>
            <p>{{ intro.content }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAllDishes } from '@/api/dish'
import { addToCart } from '@/api/cart'
import defaultAvatar from '@/assets/default-avatar.png'

export default {
  name: 'Dashboard',
  data() {
    return {
      searchQuery: '',
      defaultAvatar,
      loading: false,
      featuredDishes: [],
      features: [
        {
          id: 1,
          title: '菜品浏览',
          description: '浏览所有美味菜品',
          icon: 'el-icon-dish',
          path: '/dish/list'
        },
        {
          id: 2,
          title: '商店浏览',
          description: '探索各种美食店铺',
          icon: 'el-icon-shop',
          path: '/store/list'
        },
        {
          id: 3,
          title: '购物车',
          description: '管理您的订单',
          icon: 'el-icon-shopping-cart-2',
          path: '/cart'
        },
        {
          id: 4,
          title: '个人中心',
          description: '管理您的账户信息',
          icon: 'el-icon-user',
          path: '/information'
        }
      ],
      intros: [
        {
          id: 1,
          title: '丰富菜品',
          content: '提供各种口味的美食，满足您的不同需求',
          icon: 'el-icon-dish'
        },
        {
          id: 2,
          title: '便捷下单',
          content: '简单几步即可完成下单，享受美食',
          icon: 'el-icon-shopping-cart-1'
        },
        {
          id: 3,
          title: '安全支付',
          content: '多种支付方式，安全可靠',
          icon: 'el-icon-money'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'userInfo', 'isStoreOwner'])
  },
  mounted() {
    this.loadFeaturedDishes()
  },
  methods: {
    // 加载推荐菜品
    async loadFeaturedDishes() {
      this.loading = true
      try {
        const response = await getAllDishes({
          pageNum: 1,
          pageSize: 8,
          keyword: this.searchQuery
        })
        
        if (response.data && response.data.code === 20000) {
          const pageInfo = response.data.data
          this.featuredDishes = pageInfo.list || []
        }
      } catch (error) {
        console.error('加载推荐菜品失败:', error)
        this.$message.error('加载推荐菜品失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索菜品
    handleSearch() {
      this.$router.push({
        path: '/dish/list',
        query: { keyword: this.searchQuery }
      })
    },

    // 跳转到菜品列表页面
    goToDishList() {
      this.$router.push('/dish/list')
    },

    // 添加到购物车
    async addToCart(dish) {
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }

      try {
        const response = await addToCart(dish.dishname, dish.dishprice, this.userInfo.userid)
        if (response.data && response.data.code === 20000) {
          this.$message.success('已添加到购物车')
        } else {
          this.$message.error(response.data?.msg || '添加失败')
        }
      } catch (error) {
        console.error('添加到购物车失败:', error)
        this.$message.error('添加到购物车失败')
      }
    },

    // 查看菜品详情
    viewDishDetail(dish) {
      this.$router.push({
        path: '/dish/detail',
        query: { dishId: dish.dishid }
      })
    },
    
    navigateTo(path) {
      if (path === '/cart' && !this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .welcome-section {
    text-align: center;
    margin-bottom: 40px;
    
    .welcome-title {
      font-size: 36px;
      color: #333;
      margin-bottom: 10px;
    }
    
    .welcome-subtitle {
      font-size: 18px;
      color: #666;
    }
  }

  .search-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;

    .search-wrapper {
      width: 100%;
      max-width: 600px;
    }

    .search-input {
      width: 100%;
    }
  }

  .dishes-section {
    margin-bottom: 40px;

    .section-header {
      text-align: center;
      margin-bottom: 30px;

      .section-title {
        font-size: 28px;
        color: #333;
        margin-bottom: 10px;
      }

      .section-subtitle {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
      }
    }

    .featured-dishes {
      .featured-title {
        font-size: 22px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
      }

      .dish-card {
        margin-bottom: 20px;
        transition: transform 0.3s;
        
        &:hover {
          transform: translateY(-5px);
        }

        .dish-image {
          height: 200px;
          overflow: hidden;
          border-radius: 8px;
          margin-bottom: 15px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .dish-info {
          .dish-name {
            font-size: 18px;
            color: #333;
            margin: 0 0 10px 0;
            font-weight: bold;
          }

          .dish-price {
            font-size: 20px;
            color: #e74c3c;
            font-weight: bold;
            margin: 0 0 10px 0;
          }

          .dish-description {
            color: #666;
            font-size: 14px;
            margin: 0 0 15px 0;
            line-height: 1.4;
          }

          .dish-actions {
            display: flex;
            gap: 10px;
          }
        }
      }
    }
  }

  .features-section {
    margin-bottom: 40px;

    .feature-card {
      text-align: center;
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }

      .feature-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 15px;
      }

      .feature-title {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
      }

      .feature-desc {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .user-section {
    margin-bottom: 40px;

    .user-card {
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .user-details {
          margin-left: 15px;

          h3 {
            margin: 0 0 5px 0;
            color: #333;
          }

          p {
            margin: 0;
            color: #666;
          }
        }
      }

      .user-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
    }
  }

  .intro-section {
    .intro-title {
      text-align: center;
      font-size: 28px;
      color: #333;
      margin-bottom: 30px;
    }

    .intro-item {
      text-align: center;
      padding: 20px;

      .intro-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 15px;
      }

      h4 {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
      }

      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
    
    .welcome-title {
      font-size: 28px !important;
    }
    
    .feature-card {
      margin-bottom: 20px;
    }
    
    .user-actions {
      flex-direction: column;
      
      .el-button {
        width: 100%;
      }
    }
  }
}
</style> 